import React, { Component } from 'react';
import { observer } from 'mobx-react';

import MTable from '@/component/common/MTable';
import { Pagination } from 'antd';
import BalanceLayout from '@/component/balance/Layout'

import FilterListPage from '@/component/common/FilterListPage';
import ApiHelper from '@/store/ApiHelper';
import StoreListMini from '@/store/StoreListMini';
import format from '@/tool/format';

import { balance_list as api_balance_list, balance_list_excel } from '@/constants/ApiTypes';
import adminType from '@/tool/adminType';
import { API_URL } from '@/config';

// const testData = [
//     { a: 'hd1234567890', b: 'df123456789012', c: '2017/09/10 09:32:08', d: '黄晓明 1234567890', e: '房租', f: '+9999999.00', g: '1234567元' },
//     { a: 'hd1234567890', b: 'df123456789012', c: '2017/09/10 09:32:08', d: '黄晓明 1234567890', e: '房租', f: '+9999999.00', g: '1234567元' }
// ];

@observer class BalanceListFrozen extends FilterListPage {
    constructor(props) {
        super(props);
        this.defaultQuery = {
            balance_type: 3
        };
        this.listApiType = api_balance_list;
    }
    async pageDidMount() {
        const result = await StoreListMini.getInfo();
        if (!result) return;
        this._setState({ loading: false });
    }
    downloadExcel = values => {
        let url = API_URL + '/' + balance_list_excel;
        let i = 0;
        for (let p in values) {
            if (i == 0) {
                url = url + `?${p}=${values[p]}`;
            } else {
                url = url + `&${p}=${values[p]}`;
            }
            i++;
        }
        window.open(url);
    };
    render() {
        const { dataList, spinning, result_info } = this.state;
        const deal_balance = (text, record, dataIndex) => {
            let _text = isNaN(text) ? text : text / 100 + '元';
            if (record.balance_type == '收入') return `+${_text}`;
            if (record.balance_type == '支出') return `-${_text}`;
            if (record.balance_type == '冻结') return <span style={{ color: 'b2d0ff' }}>{_text}</span>;
        };
        const deal_balance_now = (text, record, dataIndex) => {
            if (text == null) return '未记录';
            return isNaN(text) ? text : text / 100 + '元';
        };
        let columns = [
            { title: '住家交易号', dataIndex: 'trade_no', align: 'middle' },
            { title: '订单号/合同号', align: 'middle', render: (text, record, dataIndex) => `${record.order_code}/${record.contract_no}` },
            { title: '发生时间', dataIndex: 'trade_time', align: 'middle', render: (text, record, dataIndex) => format.timeString(text) },
            { title: '对方信息', dataIndex: 'to_info', align: 'middle' },
            { title: '财务类型', dataIndex: 'trade_type', align: 'middle' },
            { title: '收支金额', dataIndex: 'balance', align: 'middle', render: deal_balance }
            // { title: '操作', dataIndex: 'h', align: 'middle',  render: () => '详情' }
        ];
        if (adminType() == 1) columns.push(
            { title: '账户余额', dataIndex: 'balance_now', align: 'middle', render: deal_balance_now }
        );
        return (
            <BalanceLayout loading={this.state.loading} onSubmit={this.getDataListWithFilter} sum={result_info.sum} downloadExcel={this.downloadExcel}>
                <MTable columns={columns} dataSource={dataList} spinning={spinning}/>
                <div className="pagination">
                    {this.state.total > 0 && <Pagination showQuickJumper current={this.state.current_page} pageSize={10} total={this.state.total} onChange={this.pageOnChange} />}
                </div>
            </BalanceLayout>
        );
    }
}

export default BalanceListFrozen;